<template>
  <div style="width:100%">
    <div id="monthChart" ref="lineChart1" style="width:100%;height:31vh;" />
  </div>
</template>

<script>
import { npbigdeptdevicestatues } from '../../api/dataApi'

export default {
  data() {
    return {
      personD: [],
      psname: '',
      data: [],
    }
  },
  watch: {
    data: {
      handler() {
        this.initChart()
      },
      deep: true,
    },
  },
  destroyed() {
    clearInterval(this.timeover)
  },
  mounted() {
    this.getData()
    if (this.timeover) {
      clearInterval(this.timeover)
    }
    this.timeover = setInterval(() => {
      this.getData()
    }, window.time1)
  },
  props: {
    status: {
      type: Array,
      default: null,
    },
  },
  methods: {
    getData() {
      const that = this
      const header = {}
      // header['report.tableid'] = 'bne_manage_prod_chart_devicestatus'
      const params = {
        _params: JSON.stringify(header),
        _conditions: {},
        pageIndex: -1,
        sortField: '',
        sortOrder: '',
      }
      npbigdeptdevicestatues(params)
        .then((res) => {
          const data =
            res.data && res.data['制造中心金工一部']
              ? res.data['制造中心金工一部']
              : {}
          this.data = this.status.map((item) => {
            return {
              name: item.name,
              value: data[item.name],
            }
          })
          console.log(this.data, 'center0')
          this.initChart()
        })
        .catch(() => {
          that.$message.error('数据请求失败，请联系管理员-人员！')
        })
      //获取静态数据
      // this.data = this.status
    },
    initChart() {
      const myChart = this.$echarts.init(this.$refs.lineChart1)
      const option = {
        title: {
          text: '金工一部',
          top: 5,
          left: 'center',
          textStyle: {
            fontSize: this.fitChartSize(22),
            color: '#fff',
            fontWeight: 'normal',
          },
        },
        legend: {
          data: this.status.map((item) => item.name),
          itemWidth: 10,
          itemHeight: 10,
          width: 50,
          top: 'bottom',
          right: 15,
          textStyle: {
            color: '#fff',
            fontSize: this.fitChartSize(13),
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            center: ['45%', '55%'],
            radius: ['43%', '55%'],
            data: this.data.map((item, index) => {
              item.label = {
                color: this.status[index].color,
              }
              return item
            }),
            label: {
              // position: 'inside',
              formatter: function(data) {
                return `${data.name} \n${data.percent.toFixed(1)}%`
              },
              fontSize: this.fitChartSize(18),
              color: '#fff',
            },
            itemStyle: {
              color: (params) => {
                var index = params.dataIndex
                return this.status[index].color
              },
              labelLine: {
                show: true, //选中时不显示数据标签引导线
                length: 5,
                lineStyle: {
                  width: 1,
                  type: 'solid',
                },
              },
              emphasis: {
                show: false,
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>

<style lang="less" scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>
